<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item" @click="tag = 0" :class="{ active: tag == 0 }">
        全部
      </span>
      <span class="item" @click="tag = 7" :class="{ active: tag == 7 }">
        华语
      </span>
      <span class="item" @click="tag = 96" :class="{ active: tag == 96 }">
        欧美
      </span>
      <span class="item" @click="tag = 8" :class="{ active: tag == 8 }">
        日本
      </span>
      <span class="item" @click="tag = 16" :class="{ active: tag == 16 }">
        韩国
      </span>
    </div>
    <!-- 底部的table -->
    <table class="el-table playlit-table">
      <thead>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </thead>
      <tbody>
        <tr class="el-table__row" v-for="(k,index) in lists" :key="index">
          <td>{{ index+1 }}</td>
          <td>
            <div class="img-wrap">
              <img :src="k.album.picUrl" alt="" />
              <!-- 播放按钮 -->
              <span  class="iconfont icon-play" @click="playMusic(k.id)"></span>
            </div>
          </td>
          <td>
            <div class="song-wrap">
              <div class="name-wrap">
                <span>{{k.name}}</span>
                <span class="iconfont icon-mv"></span>
              </div>
              <span></span>
            </div>
          </td>
          <td>{{ k.album.artists[0].name }}</td>
          <td>{{ k.album.name }}</td>
          <td>{{ k.duration }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //歌曲列表
      lists:[],
      //分类 地区类型id（数字）
      tag:0
    }
  },
  created(){
    this.getList()
  },
  watch:{
    //tag发生变化再调用一次
    tag(){
      this.getList()
    }
  },
  methods:{
    //获取歌曲
    getList(){
      this.axios.get('top/song',{
      params:{
        type:this.tag
       }
     }).then(res=>{
       console.log(res);
       this.lists = res.data.data
       //获取到的时间需要转换 处理时长
      for(let i =0;i<this.lists.length;i++){
        //获取总毫秒
         let duration = this.lists[i].duration
         //总秒： 总毫秒 / 1000
         //分 ： 总秒 / 60
         //秒：总秒数 % 60
         let min = parseInt(duration / 1000 / 60)
         if(min<10){
           min = '0'+min
         }
         let sec = parseInt( (duration /1000) % 60)
         if(sec<10){
           sec = '0'+sec
         }
         this.lists[i].duration = `${min}:${sec}`
      }
     })
    },
    //播放
    playMusic(id){
      console.log(id);
      this.axios.get('song/url',{
        params:{
          id
        }
      }).then(res=>{
        console.log(res);
        let url = res.data.data[0].url
        this.$emit('srcChenge',url)
      })
    }
  }
}
</script>

<style>

</style>